<template>
  <div v-if="showCheckedEnable">
    <div class="agreement-text" >
    <div v-if="showAgreement">  <el-checkbox v-model="radio"  @change="handleChange"  label="登录即表示您同意" size="large" /></div>
    <span v-else>登录即表示您同意</span>
    <a href="#" style="color: #666666; text-decoration: none;">《用户协议》</a>
    和
    <a href="#" style="color: #666666; text-decoration: none;">《隐私政策》</a>
  
  </div>
  </div>
</template>

<script setup>
import { ref,defineEmits } from 'vue';
const radio = ref(false);
const props=defineProps({
    showChecked:{
        type:Boolean,
        default:true
    },
    showComponent:{
        type:Boolean,
        default:true
    }
})
const emit=defineEmits(['change'])
const showCheckedEnable=ref(props.showComponent)
const showAgreement = ref(props.showChecked); // This should be passed from the parent component

const handleChange = () => {
    // radio.value = !radio.value;
    emit('change',radio.value)
}
</script>

<style scoped lang="scss">
::v-deep(.el-checkbox__label) {
        color: #666666 !important;
    }
.agreement-text{
    display:flex;
    align-items:center;
    font-size:14px;
    a{
       
        white-space:nowrap;
    }
    
    .el-radio{
        margin-right:0px;
    }
  
}
</style>
